<template>
  <d2-container>
     <d2-crud
      :columns="columns"
      :data="data"
      title="D2 CRUD"
      add-mode
      :add-button="addButton"
      :form-template="formTemplate"
      :form-options="formOptions"
      :form-rules="formRules"
      @row-add="handleRowAdd"
      @dialog-cancel="handleDialogCancel"/>
  </d2-container>
</template>

<script>
export default {
  name: 'page1',
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '身份证号',
          key: 'idcard'
        },
        {
          title: '出生年月',
          key: 'birthday'
        }
      ],
      data: [
      ],
      addButton: {
        text: '点我查看表单校验',
        icon: 'el-icon-plus',
        size: 'small'
      },
      formTemplate: {
        name: {
          title: '姓名',
          value: '',
          component: {
            span: 12
          }
        },
        sex: {
          title: '性别',
          value: '',
          component: {
            span: 12
          }
        },
        idcard: {
          title: '身份证',
          value: ''
        },
        birthday: {
          title: '出生日期'
        },
        a: { component: {
          name: 'el-input',
          type: 'textarea'
        } },
        b: {},
        c: {},
        d: {},
        e: {},
        f: { component: {
          name: 'el-date-picker',
          type: 'datetime'
        } }
      },
      formOptions: {
        labelWidth: '100px',
        labelPosition: 'right',
        saveLoading: false
      }
    }
  },
  methods: {
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
        console.log(row)
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        done()
        this.formOptions.saveLoading = false
      }, 300)
    },
    handleDialogCancel (done) {
      this.$message({
        message: '取消保存',
        type: 'warning'
      })
      done()
    }
  }
}
</script>
